<template>
  <header class="header">
    <div class="logo">
      <router-link to="/">智能旅行</router-link>
    </div>
    <nav class="navigation">
      <router-link to="/">首页</router-link>
      <router-link to="/spots">景点</router-link>
    </nav>
    <div class="user-info">
      <template v-if="isAuthenticated">
        <span>欢迎, {{ currentUser.nickname || currentUser.email }}</span>
        <a href="#" @click.prevent="handleLogout">退出</a>
      </template>
      <template v-else>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
      </template>
    </div>
  </header>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'AppHeader',
  computed: {
    ...mapGetters('user', ['isAuthenticated', 'currentUser'])
  },
  methods: {
    ...mapActions('user', ['logout']),
    handleLogout() {
      this.logout();
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background-color: #b2e5d6;
  height: 60px;
  border-bottom: 1px solid #b2e5d6;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #2ca06c;
}

.navigation a {
  margin: 0 15px;
  color: #42b983;
  font-size: 16px;
}

.navigation a.router-link-exact-active {
  font-weight: bold;
  color: #2ca06c;
}

.user-info a, .user-info span {
  margin-left: 15px;
  color: #42b983;
  font-size: 16px;
  cursor: pointer;
}

.user-info a:hover {
  color: #2ca06c;
}
</style> 